<template>
    <div id="AddNewVisitor">
        <div class="tableTit">面试信息表</div>
        <table class="table table-bordered" style="border:1px solid #e6dede ">
            <tbody>
            <tr>
                <td rowspan="7" class="title">基本信息</td>
                <td class="title ">姓名 <span class="required">*</span></td>
                <td>
                    <input name="name" v-model="tableData.sname" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Name">
                    <i v-show="errors.has('name')" class="fa fa-warning"></i>
                    <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
                </td>
                <td class="title">年龄</td>
                <td colspan="2">
                    <!-- <el-input v-model="tableData.sage"></el-input> -->
                    <input name="年龄" v-model="tableData.sage" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('年龄') }" type="text" placeholder="年龄">
                    <i v-show="errors.has('年龄')" class="fa fa-warning"></i>
                    <span v-show="errors.has('年龄')" class="help is-danger">{{ errors.first('年龄') }}</span>
                </td>
            </tr>
            <tr>
                <td class="title" >性别</td>
                <td  style="text-align:left">
                    <el-switch
                    v-model="tableData.sgender"
                    style="display: block"
                    active-color="LightPink"
                    inactive-color="Turquoise"
                    active-text="女"
                    inactive-text="男">
                    </el-switch>

                </td>
                <td class="title">籍贯</td>
                <td colspan="2">
                    <el-input ></el-input>
                </td>
            </tr>
            <tr>
                <td class="title">手机<span class="required">*</span></td>
                <td>
                    <p class="control has-icon has-icon-right">
                        <input name="phone" v-model="tableData.mobile" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" placeholder="Phone">
                        <i v-show="errors.has('phone')" class="fa fa-warning"></i>
                        <span v-show="errors.has('phone')" class="help is-danger">{{ errors.first('phone') }}</span>
                    </p>
                </td>
                <td class="title">微信</td>
                <td colspan="2">
                    <el-input v-model="tableData.wx"></el-input>
                </td>
            </tr>
            <tr>
                <td class="title">QQ</td>
                <td>
                    <el-input v-model="tableData.qq"></el-input>
                </td>
                <td class="title">上门时间 <span class="required">*</span></td>
                <td colspan="2" style="text-align:left;">
                    <el-date-picker
                    v-model="tableData.arriveTime"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </td>
            </tr>
            <tr>
                <td class="title">毕业院校</td>
                <td>
                    <el-input v-model="tableData.graduateFrom"></el-input>
                </td>
                <td class="title">学历 <span class="required">*</span></td>
                <td colspan="2">
                    <el-row>
                        <el-col :span="10">
                             <template>
                                <el-select name="学历" v-model="tableData.education" placeholder="学历" v-validate="'in:'+tableData.education">
                                    <el-option v-for="item in education "
                                    :key="item.kvalue"
                                    :label="item.kvalue"
                                    :value="item.kkey"
                                    ></el-option>
                                </el-select>
                                 <i v-show="errors.has('学历')" class="fa fa-warning"></i>
                                 <span v-show="errors.has('学历')" class="help is-danger">{{ errors.first('学历') }}</span>
                            </template>
                        </el-col>
                    </el-row>
                </td>
            </tr>
            <tr>
                <td class="title">毕业年限 <span class="required">*</span></td>
                <td>
                    <!-- <el-input v-model="tableData.graduateYear"></el-input> -->
                    <input name="毕业年限" v-model="tableData.graduateYear" v-validate="'required|numeric'" :class="{'input': true, 'is-danger': errors.has('毕业年限') }" type="text" placeholder="毕业年限">
                    <i v-show="errors.has('毕业年限')" class="fa fa-warning"></i>
                    <span v-show="errors.has('毕业年限')" class="help is-danger">{{ errors.first('毕业年限') }}</span>
                </td>
            </tr>
            <tr>
                <td class="title">居住地</td>
                <td colspan="4">
                    <el-input v-model="tableData.address"></el-input>
                </td>
            </tr>
            <tr>
                <td rowspan="4" class="title">上门信息</td>
                <td class="title">咨询师</td>
                <td class="title">
                    <!-- <el-input v-model="tableData.advisor"></el-input> -->
                    <el-select v-model="advisor" placeholder="请选择" @click.native="loadAllAdvisor">
                        <el-option
                        v-for="item in allAdvisor"
                        :key="item.value"
                        :label = item.realName
                        :value = item.realName
                        >
                        </el-option>
                    </el-select>                    
                </td>
                <td class="title ">状态 <span class="required">*</span></td>
                <td colspan="2"  style="text-align:left">
                     <el-row>
                        <el-col :span="10">
                             <template>
                                <el-select v-model="tableData.status" placeholder="请选择">
                                    <el-option v-for="item in social_status "
                                    :key="item.kvalue"
                                    :label="item.kvalue"
                                    :value="item.kkey"
                                    ></el-option>
                                </el-select>
                            </template>
                        </el-col>
                    </el-row>
                </td>
            </tr>
            <tr>
                <td class="title">岗位<span class="required">*</span></td>
                <td >
                     <el-select v-model="tableData.occupation" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in occupation"
                            :key="item.kvalue"
                            :label="item.kvalue"
                            :value="item.kkey"
                            ></el-option>
                    </el-select>
                </td>
                <td class="title ">试听 <span class="required">*</span></td>
                <td colspan="2" style="text-align:left">
                    <template>
                        <el-switch
                        v-model="tableData.isTry"
                        active-text="是"
                        inactive-text="否"
                        >
                        </el-switch>
                    </template>
                </td>
            </tr>
            <tr>
                <td class="title">邀约人</td>
                <td>
                     <el-input v-model="tableData.invitor"></el-input>
                </td>
                <td class="title" >报名 <span class="required">*</span></td>
                <td colspan="2"  style="text-align:left">
                    <template>
                        <el-switch
                        v-model="tableData.isPay"
                        active-text="是"
                        inactive-text="否"
                                         
                        >
                        </el-switch>
                    </template>
                </td>
            </tr>
            <tr>
                <td class="title">试听老师</td>
                <td >
                    <el-input v-model="tableData.teacher"></el-input>
                </td>
                <td class="title">渠道来源<span class="required">*</span></td>
                <td colspan="2"> 
                    <el-row>
                        <el-col :span="10">
                             <template>
                                <el-select v-model="tableData.source" placeholder="请选择">
                                    <el-option v-for="item in source"
                                    :key="item.kvalue"
                                    :label="item.kvalue"
                                    :value="item.kkey"
                                    ></el-option>
                                </el-select>
                            </template>
                        </el-col>
                    </el-row>
                </td>
            </tr>
            <tr>
                <td class="title">咨询反馈</td>
                <td colspan="5">
                    <el-input type="textarea" v-model="tableData.feedback"></el-input>
                </td>
            </tr>
            <tr>
                <td class="title">面试评估</td>
                <td colspan="5" style="text-align:left">
                    <!-- <el-input type="textarea" v-model="tableData.grade"></el-input> -->
                     <el-select v-model="tableData.grade" placeholder="请选择">
                        <el-option v-for="item in grades"
                        :key="item.kvalue"
                        :label="item.kvalue"
                        :value="item.kkey"
                        ></el-option>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td colspan="6" style="text-align:right"> 
                    <el-button type="primary" @click="$router.go(-1)">取消</el-button>
                    <el-button type="primary" @click="addNewVisitor">提交</el-button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data(){
        return{
            advisor: '', //咨询师
            tableData:{
                sname: '', //必填
                sage: 20, //必填
                sgender: false, //必填
                mobile: '', //必填
                email: '',
                qq: '',
                wx: '', // 微信
                arriveTime: '', // 上门时间 //必填
                education: 0, // 学历
                occupation: 'Java工程师',//来访者原来的工作
                graduateYear: 2018, //毕业年限
                graduateFrom: '', // 学校
                address: '', // 地址
                advisor: '', //咨询师
                source: 1, // 简历来源
                grade: 1, // 评价等级
                job: 2, // 岗位
                invitor: '', //邀约人
                teacher: '', //试听老师
                feedback: '', //咨询反馈
                status: 4 ,  // 上门人状态
                isTry: 0 , // 是否试听
                isPay: 0, // 是否报名
                token: this.$token
            },
            source: [], //简历来源数组
            social_status: [], //状态数组
            occupation: [], //职业
            education: [],
            grades: [],
            allAdvisor: [],//所有现有的咨询师
        }
      },
    methods: {
        addNewVisitor(){
            var date = new Date(this.tableData.arriveTime);
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDate();
            this.tableData.arriveTime = year+"-"+month+"-"+day;
            //插入 /backstage/social/insert
            //true为女,false为男
            this.tableData.sgender = this.tableData.sgender==true?0:1;
            this.tableData.isTry = this.tableData.isTry == true?1:0;
            this.tableData.isPay = this.tableData.isPay == true?1:0; 
            this.tableData.advisor = this.advisor;
            var checkedDdataArra = ["sname","sage","sgender","mobile","arriveTime",
                                    "occupation","graduateYear","grade","status","isTry","isPay"];
            var goon = this.checkData(checkedDdataArra,this.tableData);
            if(!goon){
                return;
            }    
            //在插入数据之前,对数据进行校验,校验成功就上传,不成功不给上传,
            var insertURL = window.baseURL+"/backstage/social/insert";
            this.$http.post(insertURL,this.$qs.stringify(this.tableData))
            .then((response)=>{
                if(response.data.success){
                    this.$router.go(-1);
                    this.$message({
                        message: '新增成功',
                        type: 'success'
                    })
                }else{
                    this.$message.error("新增失败")
                }
            })
            .catch((error)=>{
            })
        },
        loadGrade(){
            var url = window.baseURL+"/backstage/config/findConfigs?ktype=grade&token="+this.$token;
            this.$http.get(url)
            .then((response)=>{
                this.grades = response.data.data;
            })
        },
        loadAllAdvisor(){
            // /backstage/account/findAllAdvisor
            var campusId = JSON.parse(localStorage.getItem('responseData')).account.campusId;
            var allAdvisorURL = window.baseURL + "/backstage/account/findAllAdvisor?token="+this.$token+"&campusId="+campusId;
            this.$http.get(allAdvisorURL)
            .then((response)=>{
                this.allAdvisor = response.data.data;
            })
        },
        loadData(type){
            /*
            type: 
                education 
                occupation 
                social_status
                source
            */
            var sourceURL = window.baseURL + "/backstage/config/findConfigs?ktype=" +type +"&token=" +this.$token;
            this.$http.get(sourceURL)
            .then(response => {
                this[type] = response.data.data;
            })
            .catch(error => {
            });
    }
  },
  created() {
    //ruisiyuan/backstage/config/findConfigs
    // 从localstorage里获取学历,工作,状态,来源,面试评估
    this.education = JSON.parse(localStorage.getItem('education'));
    this.social_status = JSON.parse(localStorage.getItem('social_status'));
    this.occupation = JSON.parse(localStorage.getItem('occupation'))
    this.source = JSON.parse(localStorage.getItem('source'));
    this.grades = JSON.parse(localStorage.getItem('grade'))
  }
};
</script>

<style lang="scss" scoped>
	table,table td,table th{border:none;border-collapse:collapse;}
    #AddNewVisitor {
        position: absolute;
        padding: 20px;
        left: 0;
        right: -15px;
        bottom: 0px;
        top: 10px;
        background: white;
        z-index: 101;
        overflow: scroll;
        input{width: auto;}
    }
    .input {
        width: 100% !important;
    }
    .tableTit{font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 12px;}
    .table tr{height: 10px;}
    .table td{line-height: 10px;  vertical-align:middle; padding: 6px; }
    .table .title{font-weight: 400;font-size: 1rem;text-align: center}
    .required {
        color: red;
    }
</style>